<template>
  <!-- 回收订单子组件 -->
  <div class="box">
    <div class="listdiv" v-for="(item, index) in stores1.data" :key="index">
      <p class="p1">
        {{ item.title }} <span>{{ item.zhuangtai }}</span>
      </p>
      <div class="listdivImg" @click="$emit('btnTix2')">
        <img src="@/img/门店图片/u2732.png" alt="" />
        <div class="listdivImgp">
          <p>{{ item.site }}</p>
          <p>{{ item.time }}</p>
          <p class="p2">已等待 {{stores.times(time).value}}</p>
        </div>
      </div>
      <button class="butn1" v-show="Btnfalg" @click="$emit('btnTix')">
        {{ Btntext1 }}
      </button>
      <button v-show="Btnfalg1" @click="$emit('btnTix1')">{{ Btntext }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {useCounterStore} from "../../../stores/counter"
import { ExchangeInfo } from "../../../stores/ExchangeOrder";

const stores1  = ExchangeInfo()
// console.log(stores1.data)
const stores = useCounterStore()

defineEmits(["btnTix", "btnTix1", "btnTix2"]);





const listDefinition = defineProps({
  Btnfalg: {
    default: true,
  },
  Btnfalg1: {
    default: true,
  },
  Btntext: {
    type: String,
    default: "取消订单",
  },
  Btntext1: {
    type: String,
    default: "提醒接单",
  },
  time:{
    default:"2022/12/13 12:00:00"
  }
});
</script>

<style lang="less" scoped>
.box {
  background-color: #eefdfa;
  width: 100vw;
  height: 100%;
  padding-top: 4vw;

  .listdiv {
    // width: 90vw;
    height: 40vw;
    background-color: white;
    display: flex;
    flex-direction: column;
    // margin: 2.333vw;
    margin: 0 4vw 4vw 4vw;
    border-radius: 2%;
    position: relative;

    button {
      width: 18vw;
      height: 6vw;
      border-radius: 3.15vw;
      border: 1px solid pink;
      background-color: #f95474;
      font-size: 1.867vw;
      color: white;
      position: absolute;
      bottom: 2.333vw;
      right: 2.333vw;
      // line-height: 6vw;
    }
    .butn1 {
      right: 22vw;
      background-color: white;
      color: #f95474;
      width: 21vw;
    }
    .p1 {
      padding-left: 5vw;
      margin-left: 5vw;
      position: relative;
      margin-top: 2.333vw;
      border-left: 1vw solid #ff5588;
      font-weight: bolder;
      span {
        position: absolute;
        right: 3.667vw;
        color: #ff5588;
        font-size: 1.6vw;
        font-weight: bolder;
      }
    }
    .listdivImg {
      display: flex;
      margin-top: 5vw;
      margin-left: 5vw;
      img {
        width: 18.667vw;
        height: 18.667vw;
      }
      .listdivImgp {
        margin-left: 5.667vw;
        color: #ccc;
        font-size: 3.333vw;
        .p2 {
          display: flex;
        }
        :first-child {
          font-size: 3.333vw;
          color: black;
          margin-bottom: 2.333vw;
        }
        :last-child {
          margin-top: 2.333vw;
        }
      }
    }
  }
}
// .van-tabs van-tabs--line {
//   background-color: #eefdfa;
// }
</style>
